<template>
    <div class="list" ref="wrapper">
        <div class="content">
        <div class="area">
            <div class="title border-topbottom">当前城市</div>
            <div class="button-list">
         <div class="button-wapper">
             <div class="button">北京</div>
         </div>
         
         </div>                 
            </div>
            <!-- 热门城市 -->
            <div class="hot">
            <div class="title border-topbottom">热门城市</div>
            <div class="button-list" v-for="item of hot" :key="item.id">
         <div class="button-wapper">
             <div class="button">{{item.name}}</div>
         </div>
        </div> 
         
         </div>                 
            
            <!-- 选择的城市 -->
            <div class="selectCity" v-for="(item, key) of cities" :key="key" :ref ="key">
           <div class="title border-topbottom">{{key}}</div>
             <!-- <div class="cilt-list">
                <div class="selectCityItem border-topbottom"  v-for="innerItem of item" :key="innerItem.id">{{innerItem.name}}</div> 
            </div> -->
            
             <ul class="cilt-list">
                <li class="selectCityItem border-topbottom" v-for="innerItem of item" 
                :key="innerItem.id" >{{innerItem.name}} 
                </li> 
            </ul>
            </div>
           </div>
        </div>



</template>

<script>
import BScroll from 'better-scroll'
export default {
    name:"CityList",
    
    mounted(){
    //滚动
      this.scroll = new BScroll(this.$refs.wrapper)
     console.log(this.cities)
    },
    props:{
        hot:Array,
        cities:Object,
        letter:String
    },
    watch:{
        letter()
        {
            if (this.letter)
            {
                //由于ref是在for循环中获得的，所以这时候$$refs[this.letter]获得是是一个数组，这时候需要取第一个元素
                // console.log(this.$$refs[this.letter][0])
               const  e = this.$refs[this.letter][0]
               this.scroll.scrollToElement(e)




            }
        }
    }

}
</script>

<style lang="stylus" scoped>
// 标题的分隔线
.border-topbottom
  &:before
     border-color: #ccc
  &:after
    border-color:#ccc
.list{
    overflow: hidden
    position: absolute
    top: 1.58rem
    left: 0
    right: 0
    bottom  :0

}
// .content{
//      min-height: 100.1%
// }
.title{
    height: 35px
    line-height : 35px
    background-color :#eee
    padding-left:12px 
}
.button-list
{
    overflow: hidden
    margin 12px 0px 0px 0px
    display inline
}
.button-wapper{  
   display inline-block
   border:1px solid  #cccccc;
   text-align  center
   height 30px
   line-height 30px
   width 30%
   margin 12px 0px 6px 7px
 
  border-radius 3px
   
}
 .button{
   display inline-block

   text-align  center
   height 30px
   line-height 30px
   width 100%

   margin-bottom   0px
  border-radius 3px

   

}


// 选择的城市
.selectCityItem{
    

   line-height 40px
   margin-left 12px

}

</style>